<template>
  <div class="app-container">
    <!-- 顶部Cards栏 -->
    <TopCards />
    <!-- 使用货区 -->
    <el-row style="margin-top: -20px;">
      <el-col :span="24">
        <div class="grid-content bg-purple-dark grid-huoqu">
          <div class="region">
            <header class="region_header">
              <h1 class="region_title">使用货区</h1>
            </header>
            <div class="region_details">
              <div class="details">
                <!-- 此处是货区缝补情况 -->
                <ul class="ul-details">
                  <li @click="openPopup">
                    <div class="li_date">
                      <div class="date">
                        货区名称:M-111
                      </div>
                      <div class="box">
                        <div class="color_tag1 data-tag">
                          货区种类：药品
                        </div>

                        <div class="color_tag2 data-tag">
                          货区数量：567
                        </div>

                        <div class="color_tag3 data-tag">
                          货区类型：成品
                        </div>
                      </div>
                    </div>
                  </li>
                  <li>
                    <div class="li_date">
                      <div class="date">
                        货区名称:M-2
                      </div>
                      <div class="box">
                        <div class="color_tag1 data-tag">
                          货区种类：药品
                        </div>

                        <div class="color_tag2 data-tag">
                          货区数量：567
                        </div>

                        <div class="color_tag3 data-tag">
                          货区类型：成品
                        </div>
                      </div>
                    </div>
                  </li>
                  <li>
                    <div class="li_date">
                      <div class="date">
                        货区名称:M-3
                      </div>
                      <div class="box">
                        <div class="color_tag1 data-tag">
                          货区种类：药品
                        </div>

                        <div class="color_tag2 data-tag">
                          货区数量：567
                        </div>

                        <div class="color_tag3 data-tag">
                          货区类型：成品
                        </div>
                      </div>
                    </div>
                  </li>
                  <li>
                    <div class="li_date">
                      <div class="date">
                        货区名称:M-4
                      </div>
                      <div class="box">
                        <div class="color_tag1 data-tag">
                          货区种类：药品
                        </div>

                        <div class="color_tag2 data-tag">
                          货区数量：567
                        </div>

                        <div class="color_tag3 data-tag">
                          货区类型：成品
                        </div>
                      </div>
                    </div>
                  </li>
                  <li>
                    <div class="li_date">
                      <div class="date">
                        货区名称:M-5
                      </div>
                      <div class="box">
                        <div class="color_tag1 data-tag">
                          货区种类：药品
                        </div>

                        <div class="color_tag2 data-tag">
                          货区数量：567
                        </div>

                        <div class="color_tag3 data-tag">
                          货区类型：成品
                        </div>
                      </div>
                    </div>
                  </li>
                  <li>
                    <div class="li_date">
                      <div class="date">
                        货区名称:M-6
                      </div>
                      <div class="box">
                        <div class="color_tag1 data-tag">
                          货区种类：药品
                        </div>

                        <div class="color_tag2 data-tag">
                          货区数量：567
                        </div>

                        <div class="color_tag3 data-tag">
                          货区类型：成品
                        </div>
                      </div>
                    </div>
                  </li>
                  <li>
                    <div class="li_date">
                      <div class="date">
                        货区名称:M-7
                      </div>
                      <div class="box">
                        <div class="color_tag1 data-tag">
                          货区种类：药品
                        </div>

                        <div class="color_tag2 data-tag">
                          货区数量：567
                        </div>

                        <div class="color_tag3 data-tag">
                          货区类型：成品
                        </div>
                      </div>
                    </div>
                  </li>
                  <li>
                    <div class="li_date">
                      <div class="date">
                        货区名称:M-8
                      </div>
                      <div class="box">
                        <div class="color_tag1 data-tag">
                          货区种类：药品
                        </div>

                        <div class="color_tag2 data-tag">
                          货区数量：567
                        </div>

                        <div class="color_tag3 data-tag">
                          货区类型：成品
                        </div>
                      </div>
                    </div>
                  </li>
                  <li>
                    <div class="li_date">
                      <div class="date">
                        货区名称:M-9
                      </div>
                      <div class="box">
                        <div class="color_tag1 data-tag">
                          货区种类：药品
                        </div>

                        <div class="color_tag2 data-tag">
                          货区数量：567
                        </div>

                        <div class="color_tag3 data-tag">
                          货区类型：成品
                        </div>
                      </div>
                    </div>
                  </li>
                  <li>
                    <div class="li_date">
                      <div class="date">
                        货区名称:M-10
                      </div>
                      <div class="box">
                        <div class="color_tag1 data-tag">
                          货区种类：药品
                        </div>

                        <div class="color_tag2 data-tag">
                          货区数量：567
                        </div>

                        <div class="color_tag3 data-tag">
                          货区类型：成品
                        </div>
                      </div>
                    </div>
                  </li>
                  <li>
                    <div class="li_date">
                      <div class="date">
                        货区名称:M-11
                      </div>
                      <div class="box">
                        <div class="color_tag1 data-tag">
                          货区种类：药品
                        </div>

                        <div class="color_tag2 data-tag">
                          货区数量：567
                        </div>

                        <div class="color_tag3 data-tag">
                          货区类型：成品
                        </div>
                      </div>
                    </div>
                  </li>
                  <li>
                    <div class="li_date">
                      <div class="date">
                        货区名称:M-12
                      </div>
                      <div class="box">
                        <div class="color_tag1 data-tag">
                          货区种类：药品
                        </div>

                        <div class="color_tag2 data-tag">
                          货区数量：567
                        </div>

                        <div class="color_tag3 data-tag">
                          货区类型：成品
                        </div>
                      </div>
                    </div>
                  </li>
                  <li>
                    <div class="li_date">
                      <div class="date">
                        货区名称:M-13
                      </div>
                      <div class="box">
                        <div class="color_tag1 data-tag">
                          货区种类：药品
                        </div>

                        <div class="color_tag2 data-tag">
                          货区数量：567
                        </div>

                        <div class="color_tag3 data-tag">
                          货区类型：成品
                        </div>
                      </div>
                    </div>
                  </li>
                  <li>
                    <div class="li_date">
                      <div class="date">
                        货区名称:M-14
                      </div>
                      <div class="box">
                        <div class="color_tag1 data-tag">
                          货区种类：药品
                        </div>

                        <div class="color_tag2 data-tag">
                          货区数量：567
                        </div>

                        <div class="color_tag3 data-tag">
                          货区类型：成品
                        </div>
                      </div>
                    </div>
                  </li>
                  <li>
                    <div class="li_date">
                      <div class="date">
                        货区名称:M-15
                      </div>
                      <div class="box">
                        <div class="color_tag1 data-tag">
                          货区种类：药品
                        </div>

                        <div class="color_tag2 data-tag">
                          货区数量：567
                        </div>

                        <div class="color_tag3 data-tag">
                          货区类型：成品
                        </div>
                      </div>
                    </div>
                  </li>
                  <li>
                    <div class="li_date">
                      <div class="date">
                        货区名称:M-16
                      </div>
                      <div class="box">
                        <div class="color_tag1 data-tag">
                          货区种类：药品
                        </div>

                        <div class="color_tag2 data-tag">
                          货区数量：567
                        </div>

                        <div class="color_tag3 data-tag">
                          货区类型：成品
                        </div>
                      </div>
                    </div>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
    <!-- 空置货区 -->
    <el-row>
      <el-col :span="24">
        <div class="grid-content bg-purple-dark grid-huoqu">
          <div class="region">
            <header class="region_header">
              <h1 class="region_title">空置货区</h1>
            </header>
            <div class="region_details">
              <div class="details">
                <!-- 货区缝补情况 -->
                <ul class="ul-details ul-details_2">
                  <li>
                    <div class="li_date">
                      <div class="date">
                        货区名称:T-1
                      </div>
                      <div class="box">
                        <div class="color_tag1 data-tag">
                          货区种类：药品
                        </div>

                        <div class="color_tag2 data-tag">
                          货区数量：567
                        </div>

                        <div class="color_tag3 data-tag">
                          货区类型：成品
                        </div>
                      </div>
                    </div>
                  </li>
                  <li>
                    <div class="li_date">
                      <div class="date">
                        货区名称:T-2
                      </div>
                      <div class="box">
                        <div class="color_tag1 data-tag">
                          货区种类：药品
                        </div>

                        <div class="color_tag2 data-tag">
                          货区数量：567
                        </div>

                        <div class="color_tag3 data-tag">
                          货区类型：成品
                        </div>
                      </div>
                    </div>
                  </li>
                  <li>
                    <div class="li_date">
                      <div class="date">
                        货区名称:T-3
                      </div>
                      <div class="box">
                        <div class="color_tag1 data-tag">
                          货区种类：药品
                        </div>

                        <div class="color_tag2 data-tag">
                          货区数量：567
                        </div>

                        <div class="color_tag3 data-tag">
                          货区类型：成品
                        </div>
                      </div>
                    </div>
                  </li>
                  <li>
                    <div class="li_date">
                      <div class="date">
                        货区名称:T-4
                      </div>
                      <div class="box">
                        <div class="color_tag1 data-tag">
                          货区种类：药品
                        </div>

                        <div class="color_tag2 data-tag">
                          货区数量：567
                        </div>

                        <div class="color_tag3 data-tag">
                          货区类型：成品
                        </div>
                      </div>
                    </div>
                  </li>
                  <li>
                    <div class="li_date">
                      <div class="date">
                        货区名称:T-5
                      </div>
                      <div class="box">
                        <div class="color_tag1 data-tag">
                          货区种类：药品
                        </div>

                        <div class="color_tag2 data-tag">
                          货区数量：567
                        </div>

                        <div class="color_tag3 data-tag">
                          货区类型：成品
                        </div>
                      </div>
                    </div>
                  </li>
                  <li>
                    <div class="li_date">
                      <div class="date">
                        货区名称:T-6
                      </div>
                      <div class="box">
                        <div class="color_tag1 data-tag">
                          货区种类：药品
                        </div>

                        <div class="color_tag2 data-tag">
                          货区数量：567
                        </div>

                        <div class="color_tag3 data-tag">
                          货区类型：成品
                        </div>
                      </div>
                    </div>
                  </li>
                  <li>
                    <div class="li_date">
                      <div class="date">
                        货区名称:T-7
                      </div>
                      <div class="box">
                        <div class="color_tag1 data-tag">
                          货区种类：药品
                        </div>

                        <div class="color_tag2 data-tag">
                          货区数量：567
                        </div>

                        <div class="color_tag3 data-tag">
                          货区类型：成品
                        </div>
                      </div>
                    </div>
                  </li>
                  <li>
                    <div class="li_date">
                      <div class="date">
                        货区名称:T-8
                      </div>
                      <div class="box">
                        <div class="color_tag1 data-tag">
                          货区种类：药品
                        </div>

                        <div class="color_tag2 data-tag">
                          货区数量：567
                        </div>

                        <div class="color_tag3 data-tag">
                          货区类型：成品
                        </div>
                      </div>
                    </div>
                  </li>
                  <li>
                    <div class="li_date">
                      <div class="date">
                        货区名称:T-9
                      </div>
                      <div class="box">
                        <div class="color_tag1 data-tag">
                          货区种类：药品
                        </div>

                        <div class="color_tag2 data-tag">
                          货区数量：567
                        </div>

                        <div class="color_tag3 data-tag">
                          货区类型：成品
                        </div>
                      </div>
                    </div>
                  </li>
                  <li>
                    <div class="li_date">
                      <div class="date">
                        货区名称:T-10
                      </div>
                      <div class="box">
                        <div class="color_tag1 data-tag">
                          货区种类：药品
                        </div>

                        <div class="color_tag2 data-tag">
                          货区数量：567
                        </div>

                        <div class="color_tag3 data-tag">
                          货区类型：成品
                        </div>
                      </div>
                    </div>
                  </li>
                  <li>
                    <div class="li_date">
                      <div class="date">
                        货区名称:T-11
                      </div>
                      <div class="box">
                        <div class="color_tag1 data-tag">
                          货区种类：药品
                        </div>

                        <div class="color_tag2 data-tag">
                          货区数量：567
                        </div>

                        <div class="color_tag3 data-tag">
                          货区类型：成品
                        </div>
                      </div>
                    </div>
                  </li>
                  <li>
                    <div class="li_date">
                      <div class="date">
                        货区名称:T-12
                      </div>
                      <div class="box">
                        <div class="color_tag1 data-tag">
                          货区种类：药品
                        </div>

                        <div class="color_tag2 data-tag">
                          货区数量：567
                        </div>

                        <div class="color_tag3 data-tag">
                          货区类型：成品
                        </div>
                      </div>
                    </div>
                  </li>
                  <li>
                    <div class="li_date">
                      <div class="date">
                        货区名称:T-13
                      </div>
                      <div class="box">
                        <div class="color_tag1 data-tag">
                          货区种类：药品
                        </div>

                        <div class="color_tag2 data-tag">
                          货区数量：567
                        </div>

                        <div class="color_tag3 data-tag">
                          货区类型：成品
                        </div>
                      </div>
                    </div>
                  </li>
                  <li>
                    <div class="li_date">
                      <div class="date">
                        货区名称:T-14
                      </div>
                      <div class="box">
                        <div class="color_tag1 data-tag">
                          货区种类：药品
                        </div>

                        <div class="color_tag2 data-tag">
                          货区数量：567
                        </div>

                        <div class="color_tag3 data-tag">
                          货区类型：成品
                        </div>
                      </div>
                    </div>
                  </li>
                </ul>
              </div>

            </div>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import TopCards from "./TopCards";
export default {
  components: {
    TopCards,
  },
methods :{
  data() {
    return {}
    
  },
  openPopup() {
    this.$router.push({ path: '/libraryExcess', query: { tab: 'region' } });
  },
}
}
</script>

<!-- Layout布局样式，结构样式 -->
<style scoped>
/* .app-container {} */

.el-row {
  margin-bottom: 10px;
}

.el-col {
  border-radius: 4px;
}

.bg-purple-dark {
  /* background-color: rgba(146, 141, 141, 0.22); */
  background: rgb(245, 245, 245);
}

.bg-purple {
  background: #d3dce6;
}

.bg-purple-light {
  background: #e5e9f2;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}

.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
</style>

<!-- 顶部Cards栏样式 -->
<style scoped>
/* 移除所有ul和ol列表的小黑点 */
ul,
ol {
  list-style: none;
}

.info-wrapper {
  margin: 5px;
}

.cards {
  position: relative;
  display: flex;
  justify-content: space-between;
  padding: 0px;
  min-width: 1014px;
  width: 100%;
  /* background: rgb(245, 245, 245); */
}

.cards .card {
  position: relative;
  cursor: pointer;
  width: 185px;
  height: 85px;
  background: rgb(255, 255, 255);
  box-shadow: rgba(186, 186, 186, 0.22) 0px 8px 36px 4px;
  border-radius: 5px;
  padding: 15px;
  margin: 10px;
}

/* .card {
  border: 2px solid rgba(186, 186, 186, 0.22) 0px 8px 36px 4px;
  box-shadow: rgba(186, 186, 186, 0.22) 0px 8px 36px 4px;
} */

.fbet {
  display: flex;
  justify-content: space-between;
}

.cards .card_icon {
  display: grid;
  place-items: center;
  /* 同时实现水平和垂直居中 */
  width: 50px;
  height: 50px;
  margin-top: 8px;
  /* padding: 11.5px; */
  border-radius: 20px;
}

.cards .card_icon img {
  width: 36px;
  height: 36px;
}

.cards .card_icon_bg1 {
  background: rgb(233, 235, 255);
}

.cards .card_icon_bg2 {
  background: #ffe6e0;
}

.cards .card_icon_bg3 {
  background: #e6fbf2;
}

.cards .card_icon_bg4 {
  background: #fff4ee;
}

.cards .card_icon_bg5 {
  background: #e6fbf2;
}

.cards .card_icon_bg6 {
  background: #e9ebff;
  border-radius: 20px;
}

.cards .card_icon_bg7 {
  background: #dbedff;
}

.cards .card_icon_bg8 {
  background: #f5f5f5;
}

.cards .card_icon_bg9 {
  background: #e6fbf2;
}

.cards .card_number {
  text-align: left;
  color: rgb(51, 51, 51);
  display: block;
  line-height: 45px;
  font-size: 30px;
  font-family: Arial;
  font-weight: bold;
}

.cards .card_title {
  text-align: left;
  display: block;
  color: rgb(102, 102, 102);
  font-family: "Microsoft YaHei";
  font-size: 14px;
}
</style>

<!-- 使用货区样式 -->
<style scoped>
.grid-huoqu {
  padding: 10px;
}

.region {
  border-radius: 5px;
  border: 1px solid rgb(255, 255, 255);
  background: rgb(255, 255, 255);
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.region_header {
  display: flex;
  align-items: center;
  border-bottom: 1px solid #f0f4f7;
}

.region_title {
  flex: 1;
  font-size: 20px;
  font-weight: 400;
  color: #333;
  display: flex;
  align-items: center;
  padding-left: 12px;
  line-height: 20px;
  position: relative;
}

.region_title:before {
  content: "";
  background: #0362fa;
  display: inline-block;
  width: 4px;
  height: 20px;
  margin-right: 10px;
}

.region_details {
  min-height: 100px;
}

.details {
  padding: 10px;
  border-radius: 5px;
}

.ul-details {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: -7px -5px;
}

.ul-details li,
.ul-details_2 li {
  width: 230px;
  height: 150px;
  border: 1px solid blue;
  margin: 7px 5px;
  border-radius: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: marquee 2s linear infinite;
  box-shadow: 15px 15px 30px #bebebe,
  -15px -15px 30px #ffffff;
}

.ul-details .li_date {
  width: 100%;
  height: 100%;
  padding: 6px;
  box-sizing: border-box;
}

.ul-details .li_date .date {
  color: #8c95b0;
  height: 25px;
  font-size: 24px;
  margin: 10px;
  text-align: left;
}

.ul-details .li_date .box {
  font-size: 16px;
  display: flex;
  flex-direction: column;
  margin: 10px;
}

.ul-details .li_date .data-tag {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  cursor: pointer;
  margin-bottom: 4px
}

.ul-details .li_date .color_tag1 {
  color: #cba408 !important;
  background-color: rgba(203, 164, 8, .08) !important;
}

.ul-details .li_date .color_tag2 {
  color: #0dd885 !important;
  background-color: rgba(13, 216, 133, .08) !important;
}

.ul-details .li_date .color_tag3 {
  color: #811aff !important;
  background-color: rgba(129, 26, 255, .08) !important;
}

@keyframes marquee {
  0% { border-color: transparent #0000ff transparent transparent; }
  25% { border-color: transparent transparent #0000ff transparent; }
  50% { border-color: transparent transparent transparent #0000ff; }
  75% { border-color: #0000ff transparent transparent transparent; }
  100% { border-color: transparent #0000ff transparent transparent; }
}
</style>